<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.cz{
				width: 70px;
				height: 22px;
				display: none;
			}
			.h{
				width: 20px;
				height: 22px;
				display: inline-block;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div class="div">
			
		</div>
		
		<script src="bck/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
/*			var data1={
一级菜单1: {code: 1, shangCode: 0}
,二级菜单13: {code: 1, shangCode: 1}
,二级菜单14: {code: 4, shangCode: 1}

,一级菜单2: {code: 2, shangCode: 0}
,二级菜单12: {code: 2, shangCode: 2}

,一级菜单3: {code: 3, shangCode: 0}
,二级菜单6: {code: 1, shangCode: 3}
,二级菜单10: {code: 2, shangCode: 3}
,二级菜单17: {code: 3, shangCode: 3}

,一级菜单4: {code: 4, shangCode: 0}
,二级菜单7: {code: 1, shangCode: 4}

,一级菜单5: {code: 5, shangCode: 0}
,二级菜单9: {code: 3, shangCode: 5}
,二级菜单18: {code: 4, shangCode: 5}
,二级菜单19: {code: 5, shangCode: 5}

,一级菜单6: {code: 6, shangCode: 0}
,二级菜单8: {code: 2, shangCode: 6}

,一级菜单7: {code: 7, shangCode: 0}
,二级菜单1: {code: 1, shangCode: 7}
,二级菜单2: {code: 2, shangCode: 7}
,二级菜单4: {code: 3, shangCode: 7}

,一级菜单8: {code: 8, shangCode: 0}
,二级菜单5: {code: 1, shangCode: 8}
,二级菜单15: {code: 2, shangCode: 8}

,一级菜单9: {code: 9, shangCode: 0}
,二级菜单16: {code: 1, shangCode: 9}

,一级菜单10: {code: 10, shangCode: 0}
,二级菜单3: {code: 1, shangCode: 10}
,二级菜单11: {code: 3, shangCode: 10}

};*/
			function sx(sx){
				$(sx).parent().parent().next().slideToggle();
				if($(sx).text()==="+"){
					$(sx).text("-");
				}else{
					$(sx).text("+");
				}
			}
			
			function hov(){
				$(".hov").hover(function(){
				    $(this).children(".cz").css("display","inline-block");
				},function(){
				    $(this).children(".cz").css("display","none");
				});
			}
			
			
			function addy(obj){
				$(obj).parent().parent().next().append(
					`<div class="div0_2_1">
						<div class="div0_2_1_1 hov">
							<div class="h">
					<div onclick="sx(this)">-</div>	
				</div><span>二级菜单</span>
							<div class="cz">
								<div class="add h" onclick="adde(this)">添加</div>
								<div class="del h" onclick="dely(this)">删除</div>
								<div class="upda h" onclick="upda(this)">编辑</div>
							</div>
						</div>
						<div class="div0_2"  style="margin-left: 40px;">
							
						</div>
					</div>`);
				hov();
				
				
				
				
			}
			
			function adde(obj2){
				$(obj2).parent().parent().next().append(
					`<div class="div0_2_1_2">
							<div class="div0_2_1_2_1 hov">
								<span>三级菜单1</span>
								<div class="cz">
									<div class="del h" onclick="dely(this)">删除</div>
									<div class="upda h" onclick="upda(this)">编辑</div>
								</div>
							</div>
						</div>`);
				hov();
				
			}
			
			
			function dely(obj1){
					$(obj1).parent().parent().parent().remove();
			}
			
			function upda(obj3){
				var txt=$(obj3).parent().siblings("span").text();
				$(obj3).parent().siblings("span").html("<input type='text' class='input' value='"+txt+"' />");
				$(".input").blur(function(){
					$(this).parent().text($(this).val());
				});
			}
			
			
			
			$(document).ready(function(){
				$.ajax({
					type:"post",
					url:"/cai.php",
					dataType:"json",
					success:function(obj){
						obj1=obj.a;
						var str="";
						for (var key in obj1) {
							str+=`<div class="div0">
			<div class="div0_1 hov">
				<div class="h">
					<div onclick="sx(this)">-</div>	
				</div><span>`+key+`</span>
				<div class="cz">
						<div class="add h" onclick="addy(this)">+</div>
						<div class="del h" onclick="dely(this)">-</div>
						<div class="upda h" onclick="upda(this)">/</div>
				</div>
			</div><div class="div0_2"  style="margin-left: 20px;">`;
							for(key1 in obj1[key]){
								str+=`<div class="div0_2_1">
					<div class="div0_2_1_1 hov">
						<div class="h">
					<div onclick="sx(this)">-</div>	
				</div><span>`+obj1[key][key1]+`</span>
							<div class="cz">
								<div class="add h" onclick="adde(this)">+</div>
								<div class="del h" onclick="dely(this)">-</div>
								<div class="upda h" onclick="upda(this)">/</div>
							</div>
						</div>
						<div class="div0_2"  style="margin-left: 40px;">
						</div></div>`;
							}
							str+=`</div></div>`;
						}
						$(".div").html(str);
						hov();
						
						
						
					}
				})	
			});	
		</script>
	</body>
</html>
